<template>
    <view class="prohibition">
        <view class="demo" :style="[{ background }, { color }, { height }, { paddingTop }]">
            <!-- 左侧 -->
            <view class="returnback" @click="returnBack" v-if="back">
                <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="18"></uni-icons>
            </view>
            <!-- 中间标题文字 -->
            <view class="title">
                {{ title }}
            </view>
        </view>
    </view>
    <view class="perch" :style="[{ height: height2 }, { width: '750rpx' }]"></view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const height = ref(32);
const height2 = ref(32);
const paddingTop = ref(24);
const index = ref('');

const props = defineProps({
    title: {
        // 标题文字(默认为空)
        type: String,
        default: '驿佳'
    },
    home_th: {
        type: String,
        default: '0'
    },
    color: {
        // 标题和返回按钮颜色(默认白色)
        type: String,
        default: '#333333'
    },
    //建议使用background  因为使用backgroundColor，会导致不识别渐变颜色
    background: {
        // 背景颜色(不传值默认透明)
        type: String,
        default: ' #e5f4ff'
    },
    back: {
        // 是否显示返回按钮(不传值默认不显示)
        type: Boolean,
        default: false
    }
});
onMounted(() => {
    const demo = uni.getMenuButtonBoundingClientRect();
    height.value = demo.height + 'px';
    height2.value = demo.height + 13 + demo.top + 'px';
    paddingTop.value = demo.top + 'px';
    fn();
});
const currentTab = ref();
const fn = () => {
    const res = getCurrentPages();
    if (res.length - 2 >= 0) {
        currentTab.value = res[res.length - 2].$page.fullPath;
    }
};
function returnBack() {
    if (props.title == '登录') {
        uni.reLaunch({
            url: '/pages/home/index'
        });
    } else if (props.home_th == 1) {
        uni.reLaunch({
            url: '/pages/home/index'
        });
    } else {
        uni.navigateBack({
            back: 1
        });
    }
}
</script>
<style lang="scss">
.perch {
}
.prohibition {
    position: fixed;
    top: 0;
    left: 0;
    // background-color:;
    z-index: 997;
}
.demo {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding-bottom: 10rpx;
    box-sizing: content-box;
    position: fixed;
    top: 0;

    .returnback {
        position: absolute;
        bottom: 10rpx;
        left: 30rpx;
        height: 60rpx;
        transform: rotate(-180deg);
        display: flex;
        align-items: center;

        image {
            width: 19rpx;
            height: 31rpx;
        }
    }

    .left {
        position: absolute;
        max-width: 280rpx;
        height: 60rpx;
        line-height: 44rpx;
        top: 0;
        bottom: 0;
        left: 70rpx;
        margin: auto;
        font-size: 24rpx;
        font-family: Microsoft YaHei UI;
        font-weight: 400;
        color: #fff;
        display: flex;
        align-items: center;
        image {
            width: 24rpx;
            height: 24rpx;
            margin-left: 7rpx;
        }
        .uni-input {
            max-width: 220rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
    .title {
        font-size: 36rpx;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 4rpx;
        color: #000;
    }
}
</style>
